<template>
	<view class="addVisitor-container">
		<view class="banner">
			<view class="bannerImg">
				<image src="../../../static/Icon/visitor/banner.jpg" mode="aspectFill"></image>
			</view>
			<view class="header">
				<view class="title">
					设区外来访客预约
				</view>
				<view class="info">
					外来访客需通过社区业主进行预约后，可凭访客二维码进入社区。
				</view>
			</view>
		</view>
		<view class="form">
			<view class="inputBox">
				<view class="left">
					<text class="iconfont icon-icon-test35"></text>
					<text>
						访客姓名
					</text>
				</view>
				<view class="right">
					<input type="text" v-model:value="visitorVo.visitorName" placeholder="请输入访客姓名" />
				</view>
			</view>
			<view class="inputBox">
				<view class="left">
					<text class="iconfont icon-icon-test24"></text>
					<text>
						访客电话
					</text>
				</view>
				<view class="right">
					<input type="text" v-model:value="visitorVo.visitorPhone" placeholder="请输入访客电话" />
				</view>
			</view>
			<view class="inputBox">
				<view class="left">
					<text class="iconfont icon-yuyue"></text>
					<text>
						预约时间
					</text>
				</view>
				<view class="right">
					<view class="date" >
						<uni-datetime-picker class="uni-datetime-picker"
							type="date"
							:value="visitorVo.appointment"
							returnType="string"
							:clear-icon="false"
							:border="false"
							:start="date"
							@change="selectDate"
						></uni-datetime-picker>
					</view>
				</view>
			</view>
			<view class="middle_button" @click="order">
				预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitorVo: {
					appointment: '',
					ownerSignkey: '',
					visitorName: '',
					visitorPhone: '' 
				},
				date: new Date().toDateString(),
				userInfo:{}
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.visitorVo.appointment = ''
			this.visitorVo.visitorName = ''
			this.visitorVo.visitorPhone = ''
		},
		methods:{
			order(){
				if(this.visitorVo.visitorName == '' || this.visitorVo.appointment == '' || this.visitorVo.visitorPhone == ''){
					uni.showToast({
						title: '信息不完整',
						image: '../../../static/Icon/visitor/orderFail.png',
						position:'top',
						duration:1000
					})
				}else{
					this.$myReq({
						url: '/owner/visitor/visitor',
						method:'post',
						data: this.visitorVo
					})
					.then((res) => {
						console.log(res)
						const visitorSignkey = res.data
						uni.showToast({
							title: '预约成功',
							image: '../../../static/Icon/facility/orderSuccess.png',
							position:'top',
							duration:1000,
							success() {
								uni.navigateTo({
									url:'../qrCodeVisitor/qrCodeVisitor?visitorSignkey='+visitorSignkey,
									fail: (err) => {
										console.log(err)
									}
								})
							}
						})
					})
					.catch((err) => {
						uni.showToast({
							title: '预约失败',
							image: '../../../static/Icon/facility/orderFail.png',
							position:'top',
							duration:1000
						})
					})
				}
			},
			selectDate(e){
				this.visitorVo.appointment = e
			},
			getUserInfo(){
				const token = uni.getStorageSync("userToken")
				// console.log(token)
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					// console.log(res)
					this.userInfo = res.data
					this.visitorVo.ownerSignkey = res.data.signKey
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
.banner{
	background-color: #FFFFFF;
	.bannerImg{
		image{
			width: 750rpx;
			height: 400rpx;
		}
	}
	.header{
		padding: 20rpx 45rpx 40rpx 45rpx;
		.title{
			padding-bottom: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
			border-bottom: 4rpx solid #f6f6f6;
		}
		.info{
			padding-top: 30rpx;
			line-height: 50rpx;
		}
	}
}
.form{
	background-color: #F6F6F6;
	padding-top: 20rpx;
	.inputBox{
		padding: 20rpx 45rpx 20rpx 45rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: 80rpx;
		view{
			// border: 1px solid red;
		}
		.left{
			width: 180rpx;
			height: 80rpx;
			// font-size: 40rpx;
			text:nth-child(1){
				margin-right: 10rpx;
				line-height: 80rpx;
			}
		}
		.right{
			width: 460rpx;
			border-bottom:2rpx solid $main-garyA;
			input{
				height: 80rpx;
				line-height: 80rpx;
				// border: 1px solid red;
				padding-left: 20rpx;
			}
			.date{
				height: 80rpx;
				line-height: 80rpx;
				// border: 1px solid red;
				padding-left: 20rpx;
				color: #808080;
				.uni-datetime-picker{
					// line-height: 80rpx;
					// width: 460rpx;
					// border: 1rpx solid #808080;
				}
			}
		}
	}
}
.middle_button{
	margin: 0 auto;
	margin-top: 50rpx;
	margin-bottom: 20rpx;
	width: 400rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	border-radius: 20rpx;
	color: white;
	font-size: 35rpx;
	background: $main-colorB;
	margin-bottom: 60rpx;
}
</style>
